<template>
  <div>
    <!-- 整体框架布局  -->
    <div class="buju">
      <el-container>
        <!-- 头部  -->
        <el-header>简医</el-header>
        <el-container>
          <!-- 外层框架的侧边栏区域 和宽度 -->
          <el-aside width="260px">
            <!-- 侧边栏菜单框架  -->
            <el-row class="tac">
              <el-col>
                <!-- active-text-color 选中改变文字颜色  -->
                <!-- background-color 弹性菜单背景颜色  -->
                <!-- :collapse="isCollapse" 折叠菜单  -->
                <el-menu
                  :default-active="this.$route.path"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color=" #F7F8FC"
                  active-text-color=" #39b9ae"
                  :collapse="isCollapse"
                  router
                >
                  <el-submenu
                    :index="item.menu.authority_id + ''"
                    v-for="item in menus"
                    :key="item.menu.authority_id"
                  >
                    <template slot="title">
                      <i class="el-icon-first-aid-kit"></i>
                      <span>{{ item.menu.authority_Image_path }}</span>
                    </template>
                    <!-- 二级菜单  -->
                    <el-menu-item-group
                      v-for="subitem in item.datas"
                      :key="subitem.authority_id"
                    >
                      <el-menu-item :index="subitem.authority_path">{{
                        subitem.authority_Image_path
                      }}</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <!-- 主体内容  -->
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- 未绑定诊所用户提示框 -->
          <div>
            <el-dialog
              title="提示"
              :visible.sync="existsClinic"
              width="30%"
              :before-close="handleClose"
            >
              <span>你还未绑定诊所，请先绑定诊所</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <!-- 创建诊所框 -->
          <div>
            <!-- 添加用户模态框 -->
            <div>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="60%"
                :close-on-click-modal="false"
              >
                <el-form
                  :model="addRoleForm"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                  label-suffix=":"
                >
                  <el-form-item label="诊所名称" prop="name">
                    <el-input
                      v-model="addRoleForm.community_hospitals_name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="负责人" prop="name">
                    <el-input
                      v-model="addRoleForm.community_hospitals_principal"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="name">
                    <el-input
                      v-model="addRoleForm.community_hospitals_phone"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="诊所地址" prop="name">
                    <el-input
                      v-model="addRoleForm.community_hospitals_map"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="所属区域" prop="name">
                    <template>
                      <el-select v-model="addRoleForm.area_code">
                        <el-option
                          v-for="item in regin"
                          :key="item.region_id"
                          :label="item.region_name"
                          :value="item.region_id"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="备案号" prop="name">
                    <el-upload
                      class="upload-demo"
                      action="G:/image"
                      v-model="addRoleForm.community_hospitals_records"
                      multiple
                      :limit="3"
                      :file-list="fileList"
                    >
                      <el-button size="small" type="primary"
                        >上传备案证明</el-button
                      >
                      <span
                        slot="tip"
                        class="el-upload__tip"
                        style="color: red; margin-left: 20px"
                        >只能上传jpg/png文件，且不超过500kb</span
                      >
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="资质证明" prop="name">
                    <el-upload
                      class="upload-demo"
                      action="G:/image"
                      multiple
                      :limit="3"
                      :file-list="fileList"
                    >
                      <el-button size="small" type="primary"
                        >上传资质证明</el-button
                      >
                      <span
                        slot="tip"
                        class="el-upload__tip"
                        style="color: red; margin-left: 20px"
                        >只能上传jpg/png文件，且不超过500kb</span
                      >
                    </el-upload>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible">取 消</el-button>
                  <el-button type="primary" @click="insertClinic"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div>
          </div>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
import Axios from 'axios';
export default {
  data() {
    return {
      // 折叠菜单
      isCollapse: false,
      isSelect: false,
      menus: [],
      regin: [],
      fileList: [],
      existsClinic: false,
      dialogVisible: false,
      addRoleForm: {
        community_hospitals_number: '',
        community_hospitals_name: '',
        community_hospitals_principal: '',
        community_hospitals_phone: '',
        community_hospitals_map: '',
        area_code: '',
        community_hospitals_records: '',
        admin_id: '',
      },
    };
  },
  // created
  // 侧边栏菜单 （也是折叠菜单）
  methods: {
    initexistsClinic() {
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      Axios.get(
        '/api/Comm/existsClinic?adminId=' + userInfo.admin_id
      ).then((r) => {
        if (r.data.code === 200) {
          Axios.get(
            '/api/city_admin/findByIdMenus/' + userInfo.role_id
          ).then((r) => {
            this.menus = r.data.data;
          });
        } else {
          this.existsClinic = true;
        }
      });
    },
    handleOpen(key, keyPath) {
      this.isSelect = true;
    },
    handleClose(key, keyPath) {},
    chooseComponents(index) {},
    // 未绑定诊所框确定按钮
    confirm() {
      this.dialogVisible = true;
    },
    // 创建诊所确定按钮
    insertClinic() {
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      this.addRoleForm.admin_id = userInfo.admin_id;
      Axios.post(
        '/api/Comm/addCommunity',
        this.addRoleForm
      ).then((r) => {
        if (r.data.code === 200) {
          this.$message({
            message: '创建成功',
            type: 'success',
          });
          this.dialogVisible = false;
          this.existsClinic=false;
          this.initexistsClinic();
        } else {
          this.$message.error('很抱歉，创建失败，请重试');
        }
      });
    },
  },
  mounted() {
    console.log('sessionStorage.getItem',sessionStorage.getItem('userInfo'))
    var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    console.log(' userInfo', userInfo)
    Axios.get(
      '/api/RegionController/findCounty?area_code=' +
        userInfo.area_code
    ).then((r) => {
      console.log('地区', r);
      this.regin = r.data.data;
    });

    console.log(userInfo.role_id);
    if (userInfo.role_id === 3) {
      Axios.get(
        '/api/Comm/existsClinic?adminId=' + userInfo.admin_id
      ).then((r) => {
        if (r.data.code === 200) {
          Axios.get(
            '/api/city_admin/findByIdMenus/' + userInfo.role_id
          ).then((r) => {
            this.menus = r.data.data;
          });
        } else {
          this.existsClinic = true;
        }
      });
    } else {
      Axios.get(
        '/api/city_admin/findByIdMenus/' + userInfo.role_id
      ).then((r) => {
        this.menus = r.data.data;
      });
    }
  },
};
</script>
<style scoped>
/* 头部 */
.el-header {
  /* background-color: #b3c0d1; */
  background-color: #39b9ae;
  color: #333;
  text-align: center;
  line-height: 60px;
}
/* 侧边栏 */
.el-aside {
  background-color: #f7f8fc;
  /* background-color: #34aca2; */
  color: #333;
  text-align: center;
  /* line-height: 200px; */
  /* height: 900px; */
}
/* 折叠菜单 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 99.5%;
  min-height: 800px;
}

.el-submenu >>> .el-submenu__title {
  font-size: 18px;
  text-align: left;
  margin-top: 10px;
  margin-left: 20px;
}
/* .el-submenu  >>> .el-submenu__title {
  color: #39b9ae;
  border-left: 2px solid #39b9ae;
} */
.el-submenu >>> .el-submenu__title:hover {
  background-color: #f7f8fc !important;
}
.el-menu-item:hover {
  background-color: #f7f8fc !important;
}
.el-submenu >>> .el-icon-first-aid-kit {
  font-size: 20px;
}
.el-menu-item-group >>> .el-menu-item {
  text-align: left;
  font-size: 17px;
  margin-left: 33px;
  height: 35px;
  line-height: 35px;
  margin-bottom: 15px;
}
.el-menu-item-group >>> .is-active {
  border-left: 2px solid #39b9ae;
}

/* 内容 */
.el-main {
  /* background-color: #eff2f5; */
  background-color: #ffffff;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  /* height: 550px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/* 侧边栏和内容的布局 */
/* .el-container{
height: 550px;
  } */
</style>